<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="description" content="Traceur de fonctions mathématiques en JavaScript"/>
        <meta name="author" content="Yannick Vessaz"/>
        <meta name="revised" content="2010/09/25"/>
        <title>Graphics</title>
        <link rel="stylesheet" type="text/css" href="Style/default.css"/>
        <script type="text/javascript" src="JavaScript/ColorPicker.js"></script>        
        <script type="text/javascript" src="JavaScript/Interface.js"></script>
        <script type="text/javascript" src="JavaScript/Outils.js"></script>
        <script type="text/javascript" src="JavaScript/AffichageStandard.js"></script>
        <script type="text/javascript" src="JavaScript/Affichage3D.js"></script>
        <script type="text/javascript" src="JavaScript/AffichageUniboard.js"></script>
        <script type="text/javascript" src="JavaScript/AffichageXPM.js"></script>
        <script type="text/javascript" src="JavaScript/languages.js"></script>
        <script type="text/javascript" src="JavaScript/Etude.js"></script>
        <script type="text/javascript" src="JavaScript/Sauvegardes.js"></script>
        <script src="JavaScript/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="JavaScript/jquery.disable.text.select.js" type="text/javascript"></script>
        <script type="text/javascript">
// <![CDATA[
        // --- Variables nécessaires au fonctionnement du widget ---
                var lang = ""; //locale language
                var loadingFlag = false
                var largeur = 500
                var hauteur = 400
                var graphique = ""
                var image = ""
                var tableau = new Array()
                var ligne = new Array()
                var j = 0

                var interdit = new Array(";", "interdit", "'", '"', "eval", "new", "sankore", "=", "document", "window", "alert")

                var menuActuel = ""
                var mouseDown = false
                var outil = "point"

                var pointX = new Array()
                var pointY = new Array()
                var pente = new Array()
                var pente2 = new Array()
                var precision = 0.02

                var couleurFonction = "rgb(193,255,0)"
                var r = 255
                var g = 0
                var b = 0
                var couleurEchelle = "rgba(255,255,255,0.8)"
                var couleurGrille = "rgba(255,255,255,0.1)"
                var couleurAxes = "rgba(0,0,0,0.5)"

                var decalageX = 0
                var decalageY = 0

                var lineWidth = 3
                
                if(window.sankore){
                    try{
                        lang = sankore.locale().substr(0,2);
                        sankoreLang[lang].display;
                    } catch(e){
                        lang = "en";
                    }
                } else 
                    lang = "en";
                
                $(document).ready(function(){
                    
                    if(window.sankore){
                        
                        $("#inputEq").val(sankore.preference("functionData", ""));
                                                
                        $("#inputTeinte").val(sankore.preference("functionColor",""));
                        $("#inputValeur").val(sankore.preference("functionValue","0"));                        
                        $("#inputSaturation").val(sankore.preference("functionSaturation","0"));
                        $("#inputRouge").val(sankore.preference("functionRed","255"));
                        $("#inputVert").val(sankore.preference("functionGreen","0"));
                        $("#inputBleu").val(sankore.preference("functionBlue","0"));
                        $("#inputOpacity").val(sankore.preference("functionOpacity","1"));
                        idColor = sankore.preference("functionColorId","");                        
                        actualiserGraph();
                        
                        if(sankore.preference("simplefx","0") == 1)
                            $("#checkDerivee").attr("checked", "checked");
                        else
                            $("#checkDerivee").removeAttr('checked');
                        if(sankore.preference("hardfx","0") == 1)
                            $("#checkDerivee2").attr("checked", "checked");
                        else
                            $("#checkDerivee2").removeAttr('checked');
                        actualiserGraph();
                        
                        $("#aireG").val(sankore.preference("squareUnderFrom","-5"));
                        $("#aireD").val(sankore.preference("squareUnderTo","5"));
                        calculerAire();
                        
                        $("#inputX").val(sankore.preference("calculateThePoint","0"));
                        execute($("#inputEq").val());
                        
                        if(sankore.preference("checkboxDraw","0") == 1)
                            $("#checkAire").attr("checked", "checked");
                        else
                            $("#checkAire").removeAttr('checked');
                        actualiserGraph();
                        
                        $("#selectTheme").val(sankore.preference("selectedTheme","noir"));
                        changerTheme($("#selectTheme").val());
                        
                        $("#selectMethodeAffichage").val(sankore.preference("graphicalMethodDisplaying", "canvas"));
                        $("#zoomDefaut").val(sankore.preference("defaultZoom", "4"));
                        reinitialiserZoom($("#zoomDefaut").val());
                        
                        if(sankore.preference("showGrid","1") == 1)
                            $("#checkGrille").attr("checked", "checked");
                        else
                            $("#checkGrille").removeAttr('checked');
                        if(sankore.preference("showAxis","1") == 1)
                            $("#checkAxes").attr("checked", "checked");
                        else
                            $("#checkAxes").removeAttr('checked');
                        if(sankore.preference("showScale","1") == 1)
                            $("#checkEchelle").attr("checked", "checked");
                        else
                            $("#checkEchelle").removeAttr('checked');
                        actualiserGraph();
                        
                        $("#inputTaille").val(sankore.preference("thickness", "3"));
                        actualiserGraph();
                        
                        $("#inputDecalageX").val(sankore.preference("offsetDiagrammX", "0"));
                        decalageX = parseFloat($("#inputDecalageX").val())
                        $("#inputDecalageY").val(sankore.preference("offsetDiagrammY", "0"));
                        decalageY = parseFloat($("#inputDecalageY").val())
                        
                        $("#inputPrecision").val(sankore.preference("accuracyGraph", "0.02"));
                        precision = parseFloat($("#inputPrecision").val());
                        
                        $("#selectAffichage3D").val(sankore.preference("styleOf3DShow", "surfaces"));
                        reinitialiserZoom(5);
                        
                        $("#inputPrecision3D").val(sankore.preference("accuracyFunction", "0.2"));
                        precisionFonction3D = parseFloat($("#inputPrecision3D").val());
                        
                        $("#selectRouge3D").val(sankore.preference("redColor", "plus"));
                        $("#selectVert3D").val(sankore.preference("greenColor", "moins"));
                        $("#selectBleu3D").val(sankore.preference("blueColor", "tout"));
                        checkCouleurs3D();
                        
                        $("#couleur3Dgenerale").val(sankore.preference("3DGeneralColor", "0"));       
                        checkCouleurs3D();
                        
                        actualiserGraph();
                        
                        $("#borneXGauche").val(sankore.preference("xAxisFrom", "-5"));
                        $("#borneXDroite").val(sankore.preference("xAxisTo", "5"));
                        $("#borneYGauche").val(sankore.preference("yAxisFrom", "-5"));
                        $("#borneYDroite").val(sankore.preference("yAxisTo", "5"));
                        
                        var tempArray;
                        if(sankore.preference("graphmeHistory",""))
                                tempArray = sankore.preference("graphmeHistory","").split(",");
                        if(sankore.preference("graphmeHistory","")){
                            for(i in tempArray)
                                evaluer(tempArray[i]);                            
                        }
                        actualiserGraph();
                        loadingFlag = true;
                        
                        ////////////////////////////////////// languages suppot
                        
                        document.getElementById("texteFonction").innerHTML = sankoreLang[lang].fnc;
                        $("#xAxis").html(sankoreLang[lang].x_axis);
                        $("#yAxis").html(sankoreLang[lang].y_axis);
                        $("#scaleZoom").html(sankoreLang[lang].zoom);
                        $("#graphColor").html(sankoreLang[lang].color);
                        $("#menuCouleur .contenuMenu em").text(sankoreLang[lang].choosing_color);
                        $("#colorValues tr").eq(0).find("td").eq(0).html(sankoreLang[lang].color + ":");
                        $("#colorValues tr").eq(1).find("td").eq(0).html(sankoreLang[lang].value);
                        $("#colorValues tr").eq(2).find("td").eq(0).html(sankoreLang[lang].saturation);
                        $("#colorValues tr").eq(3).find("td").eq(0).html(sankoreLang[lang].red);
                        $("#colorValues tr").eq(4).find("td").eq(0).html(sankoreLang[lang].green);
                        $("#colorValues tr").eq(5).find("td").eq(0).html(sankoreLang[lang].blue);
                        $("#colorValues tr").eq(6).find("td").eq(0).html(sankoreLang[lang].opacity);
                        $("#menuOutils .contenuMenu h3").eq(0).text(sankoreLang[lang].tools);
                        $("#menuOutils .contenuMenu span").each(function(){
                            switch($(this).html()){
                                case "Mouse events:":
                                    $(this).html(sankoreLang[lang].mouse_events);
                                    break;
                                case "Derivative:":
                                    $(this).html(sankoreLang[lang].derivative);
                                    break;
                                case "Square under function:":
                                    $(this).html(sankoreLang[lang].square_under_func);
                                    break;
                                case "Calculate the point on the function:":
                                    $(this).html(sankoreLang[lang].point_calculate);
                                    break;
                                case "Analysis of function:":
                                    $(this).html(sankoreLang[lang].analysis_of_func);
                                    break;
                                case "Display test:":
                                    $(this).html(sankoreLang[lang].display_test);
                                    break;
                                case "From":
                                    $(this).html(sankoreLang[lang].from);
                                    break;
                                case "to":
                                    $(this).html(sankoreLang[lang].to);
                                    break;
                                default:
                                    break;
                            }
                            return true;
                        });
                        $("label[for*='checkAire']").text(sankoreLang[lang].draw);
                        $("#menuOptions td").eq(0).html(sankoreLang[lang].widget);
                        $("#menuOptions h3").eq(0).text(sankoreLang[lang].widget_options);
                        $("#menuOptions2D h3").eq(0).text(sankoreLang[lang].options + " 2D");
                        $("#menuOptions2D span").each(function(){
                            switch($(this).html()){
                                case "The graphical method displaying:":
                                    $(this).html(sankoreLang[lang].the_graphical);
                                    break;
                                case "Zoom default:":
                                    $(this).html(sankoreLang[lang].zoom_def);
                                    break;
                                case "Thickness:":
                                    $(this).html(sankoreLang[lang].thickness);
                                    break;
                                case "Offset diagram:":
                                    $(this).html(sankoreLang[lang].offset_diagram);
                                    break;
                                case "Accuracy graph:":
                                    $(this).html(sankoreLang[lang].accuracy_graph);
                                    break;
                            }
                            return true;
                        });
                        $("#selectMethodeAffichage option").eq(0).text("canvas (" + sankoreLang[lang].lines + ")")
                        .next().text("canvas (" + sankoreLang[lang].points + ")")
                        .next().next().text("svg (1 " + sankoreLang[lang].image + ")");
                        $("label[for*='checkGrille']").text(sankoreLang[lang].show_grid);
                        $("label[for*='checkAxes']").text(sankoreLang[lang].show_axis);
                        $("label[for*='checkEchelle']").text(sankoreLang[lang].scale);
                        $("#menuOptions3D h3").eq(0).text(sankoreLang[lang].options + " 3D");
                        $("#menuOptions3D span").each(function(){
                            switch($(this).html()){
                                case "Show the style:":
                                    $(this).html(sankoreLang[lang].show_the_style);
                                    break;
                                case "Accuracy function:":
                                    $(this).html(sankoreLang[lang].accuracy_func);
                                    break;
                                case "Use the color":
                                    $(this).html(sankoreLang[lang].use_the_color);
                                    break;
                                case "red:":
                                    $(this).html(sankoreLang[lang].red);
                                    break;
                                case "green:":
                                    $(this).html(sankoreLang[lang].green);
                                    break;
                                case "blue:":
                                    $(this).html(sankoreLang[lang].blue);
                                    break;
                                case "General value:":
                                    $(this).html(sankoreLang[lang].general_value);
                                    break;
                                case "from":
                                    $(this).html(sankoreLang[lang].from);
                                    break;
                                case "to":
                                    $(this).html(sankoreLang[lang].to);
                                    break;
                            }
                            return true;
                        });
                        
                        $("#selectAffichage3D option").eq(0).text(sankoreLang[lang].surfaces)
                        .next().text(sankoreLang[lang].points);
                        
                        $("#selectRouge3D option").eq(0).text(sankoreLang[lang].positive_value)
                        .next().text(sankoreLang[lang].negative_value)
                        .next().text(sankoreLang[lang].general_value);
                        
                        $("#selectVert3D option").eq(0).text(sankoreLang[lang].negative_value)
                        .next().text(sankoreLang[lang].positive_value)
                        .next().text(sankoreLang[lang].general_value);
                        
                        $("#selectBleu3D option").eq(0).text(sankoreLang[lang].general_value)
                        .next().text(sankoreLang[lang].positive_value)
                        .next().text(sankoreLang[lang].negative_value);
                        
                        $("#menuAide .ongletMenu td, #menuAideExemples .ongletMenu td, #menuAideAutres .ongletMenu td").each(function(){
                            switch($(this).html()){
                                case "Using":
                                    $(this).html(sankoreLang[lang].using);
                                    break;
                                case "Examples":
                                    $(this).html(sankoreLang[lang].examples);
                                    break;
                                case "Other":
                                    $(this).html(sankoreLang[lang].other);
                                    break;
                            }
                        });
                        
                        $("#menuAide h1").each(function(){
                            switch($(this).html()){
                                case "How it work.":
                                    $(this).html(sankoreLang[lang].how_it_work);
                                    break;
                                case "Constants":
                                    $(this).html(sankoreLang[lang].consts);
                                    break;
                                case "Keyboard keys":
                                    $(this).html(sankoreLang[lang].keys);
                                    break;
                            }
                            return true;
                        });
                        
                        $("#menuAide h2").each(function(){
                            switch($(this).html()){
                                case "Basic operations":
                                    $(this).html(sankoreLang[lang].basic_operations);
                                    break;
                                case "Trigonometric functions":
                                    $(this).html(sankoreLang[lang].trigonometric);
                                    break;
                                case "Hyperbolic functions":
                                    $(this).html(sankoreLang[lang].hyperbolic_func);
                                    break;
                                case "Square roots and degrees":
                                    $(this).html(sankoreLang[lang].square_roots_and_degrees);
                                    break;
                                case "Exponential and logarithm":
                                    $(this).html(sankoreLang[lang].exponential);
                                    break;
                                case "Absolute number value":
                                    $(this).html(sankoreLang[lang].abs);
                                    break;
                                case "Rounding":
                                    $(this).html(sankoreLang[lang].rounding);
                                    break;
                            }
                            return true;
                        });
                        
                        $("#menuAide span").each(function(){
                            switch($(this).html()){
                                case "This widget allow to draw mathematical function. Enter function in the field in the top part of widget and press \"Show\".":
                                    $(this).html(sankoreLang[lang].this_widget_allow);
                                    break;
                                case "You can enter following mathematical function:":
                                    $(this).html(sankoreLang[lang].you_can_enter);
                                    break;
                                case "Plus":
                                    $(this).html(sankoreLang[lang].plus);
                                    break;
                                case "Minus":
                                    $(this).html(sankoreLang[lang].minus);
                                    break;
                                case "Multiplication":
                                    $(this).html(sankoreLang[lang].multi);
                                    break;
                                case "Division":
                                    $(this).html(sankoreLang[lang].division);
                                    break;
                                case "Mod":
                                    $(this).html(sankoreLang[lang].mod);
                                    break;
                                case "Sine":
                                    $(this).html(sankoreLang[lang].sine);
                                    break;
                                case "Cosine":
                                    $(this).html(sankoreLang[lang].cosine);
                                    break;
                                case "Tangent":
                                    $(this).html(sankoreLang[lang].tangent);
                                    break;
                                case "Cotangent":
                                    $(this).html(sankoreLang[lang].cotangent);
                                    break;
                                case "Secant":
                                    $(this).html(sankoreLang[lang].secant);
                                    break;
                                case "Cosecant":
                                    $(this).html(sankoreLang[lang].cosecant);
                                    break;
                                case "Arc sine":
                                    $(this).html(sankoreLang[lang].arc_sine);
                                    break;
                                case "Arc cosine":
                                    $(this).html(sankoreLang[lang].arc_cosine);
                                    break;
                                case "Arc tangent":
                                    $(this).html(sankoreLang[lang].arc_tangent);
                                    break;
                                case "Arc cotangent":
                                    $(this).html(sankoreLang[lang].arc_cotangent);
                                    break;
                                case "Hyperbolic sine":
                                    $(this).html(sankoreLang[lang].hyp_sine);
                                    break;
                                case "Hyperbolic cosine":
                                    $(this).html(sankoreLang[lang].hyp_cosine);
                                    break;
                                case "Hyperbolic tangent":
                                    $(this).html(sankoreLang[lang].hyp_tangent);
                                    break;
                                case "Hyperbolic cotangent":
                                    $(this).html(sankoreLang[lang].hyp_cotangent);
                                    break;
                                case "Hyperbolic secant":
                                    $(this).html(sankoreLang[lang].hyp_secant);
                                    break;
                                case "Hyperbolic cosecant":
                                    $(this).html(sankoreLang[lang].hyp_cosecant);
                                    break;
                                case "Hyperbolic arc sine":
                                    $(this).html(sankoreLang[lang].hyp_arc_sine);
                                    break;
                                case "Hyperbolic arc cosine":
                                    $(this).html(sankoreLang[lang].hyp_arc_cosine);
                                    break;
                                case "Hyperbolic arc tangent":
                                    $(this).html(sankoreLang[lang].hyp_arc_tangent);
                                    break;
                                case "Hyperbolic arc cotangent":
                                    $(this).html(sankoreLang[lang].hyp_arc_cotangent);
                                    break;
                                case "Square root":
                                    $(this).html(sankoreLang[lang].square_root);
                                    break;
                                case "Degree":
                                    $(this).html(sankoreLang[lang].degree);
                                    break;
                                case "Root":
                                    $(this).html(sankoreLang[lang].root);
                                    break;
                                case "Variable x to the power y":
                                    $(this).html(sankoreLang[lang].variable_x);
                                    break;
                                case "Root y of x":
                                    $(this).html(sankoreLang[lang].root_y);
                                    break;
                                case "Natural logarithm":
                                    $(this).html(sankoreLang[lang].natural_log);
                                    break;
                                case "Decimal logarithm":
                                    $(this).html(sankoreLang[lang].decimal_log);
                                    break;
                                case "rounding to the nearest whole number":
                                    $(this).html(sankoreLang[lang].round_nearest);
                                    break;
                                case "rounding to the nearest whole number in a big way":
                                    $(this).html(sankoreLang[lang].round_nearest_big);
                                    break;
                                case "rounding to the nearest whole number the smaller side":
                                    $(this).html(sankoreLang[lang].round_nearest_small);
                                    break;
                                case "Also are available some constants:":
                                    $(this).html(sankoreLang[lang].available_const);
                                    break;
                                case "reset widget":
                                    $(this).html(sankoreLang[lang].reload_widget);
                                    break;
                                case "left arrow":
                                    $(this).html(sankoreLang[lang].left_arrow);
                                    break;
                                case "top arrow":
                                    $(this).html(sankoreLang[lang].top_arrow);
                                    break;
                                case "right arrow":
                                    $(this).html(sankoreLang[lang].right_arrow);
                                    break;
                                case "bottom arrow":
                                    $(this).html(sankoreLang[lang].bottom_arrow);
                                    break;
                                case "graph will be moved left":
                                    $(this).html(sankoreLang[lang].moved_left);
                                    break;
                                case "graph will be moved top":
                                    $(this).html(sankoreLang[lang].moved_top);
                                    break;
                                case "graph will be moved right":
                                    $(this).html(sankoreLang[lang].moved_right);
                                    break;
                                case "graph will be moved bottom":
                                    $(this).html(sankoreLang[lang].moved_bottom);
                                    break;
                                case "or":
                                    $(this).html(sankoreLang[lang].or);
                                    break;
                            }
                            return true;
                        });
                        
                        $("#menuAideExemples h1").each(function(){
                            if($(this).text() == "Functions 2D")
                                $(this).text(sankoreLang[lang].funcs + " 2D");
                            else
                                $(this).text(sankoreLang[lang].funcs + " 3D");
                        });
                    
                        $("#menuAideExemples span").eq(0).html("(" + sankoreLang[lang].you_can_view + ")");
                        
                        $("#menuAideAutres h4").eq(0).text(sankoreLang[lang].save_graph);
                        $("#menuAideAutres h4").eq(1).text(sankoreLang[lang].offset);
                        $("#menuAideAutres span").eq(0).text(sankoreLang[lang].in_some_browsers);
                        $("#menuAideAutres span").eq(1).text(sankoreLang[lang].if_graph_isnt);
                        $("#credits h3").eq(0).text(sankoreLang[lang].widget_is_developed);
                        $("#menuCredits .texteSecondaire span").eq(0).html(sankoreLang[lang].if_you_want_to);
                        $("#menuCredits .texteSecondaire span").eq(1).html(sankoreLang[lang].if_you_want_to_change);
                        $("#menuFonctions td").eq(0).text(sankoreLang[lang].funcs);
                        $("#menuFonctions td").eq(1).text(sankoreLang[lang].history);
                        $("#menuFonctions em").eq(0).text(sankoreLang[lang].current);
                        $("#menuFonctions em").eq(1).text(sankoreLang[lang].additional);
                        $("#menuHistorique td").eq(0).text(sankoreLang[lang].funcs);
                        $("#menuHistorique td").eq(1).text(sankoreLang[lang].history);
                        
                        $("#menuEtude h3").text(sankoreLang[lang].analysis_of_func);
                        $("#menuEtude span").each(function(){
                            switch($(this).html()){
                                case "Set of definitions:":
                                    $(this).html(sankoreLang[lang].set_of_def);
                                    break;
                                case "Parity:":
                                    $(this).html(sankoreLang[lang].parity);
                                    break;
                                case "Zeros of functions:":
                                    $(this).html(sankoreLang[lang].zeros);
                                    break;
                                case "Signe:":
                                    $(this).html(sankoreLang[lang].signe);
                                    break;
                                case "Asymptotes":
                                    $(this).html(sankoreLang[lang].asympt);
                                    break;
                                case "AH left:":
                                    $(this).html(sankoreLang[lang].ah_left);
                                    break;
                                case "AH right:":
                                    $(this).html(sankoreLang[lang].ah_right);
                                    break;
                                case "AV:":
                                    $(this).html(sankoreLang[lang].av);
                                    break;
                                case "Tool for analysis of function is not reliable on 100%. Don't forget check results of analysis before use it.":
                                    $(this).html(sankoreLang[lang].tool_for);
                                    break;
                            }
                            return true;
                        });
                        
                        $("#infoSauvegarde h1").text(sankoreLang[lang].options_saved);
                        $("#mAj h1").text(sankoreLang[lang].update);
                        $("#mAj span").each(function(){
                            switch($(this).html()){
                                case "Current version:":
                                    $(this).html(sankoreLang[lang].cur_version);
                                    break;
                                case "The last on-line version:":
                                    $(this).html(sankoreLang[lang].last_version);
                                    break;
                                case "This widget is available to using on web-site:":
                                    $(this).html(sankoreLang[lang].using_web);
                                    break;
                            }
                        });
                        
                        $("#menuOptions span").each(function(){
                            switch($(this).html()){
                                case "Themes of widget:":
                                    $(this).html(sankoreLang[lang].themes_of_widget);
                                    break;
                                case "Control options:":
                                    $(this).html(sankoreLang[lang].control_options);
                                    break;
                                case "Save a widget options in cookies or load an options from cookies or delete a registered options.":
                                    $(this).html(sankoreLang[lang].save_a_widget_options);
                                    break;
                            }
                            return true;
                        });
                        $("#selectTheme option").eq(0).text(sankoreLang[lang].black).next().text(sankoreLang[lang].blue).next().text(sankoreLang[lang].white);
                        $("input:button").each(function(){
                            switch($(this).val()){
                                case "Check":
                                    $(this).val(sankoreLang[lang].check);
                                    break;
                                case "Cancel":
                                    $(this).val(sankoreLang[lang].quit);
                                    break;
                                case "Tools":
                                    $(this).val(sankoreLang[lang].tools);
                                    break;
                                case "Options":
                                    $(this).val(sankoreLang[lang].options);
                                    break;
                                case "Help":
                                    $(this).val(sankoreLang[lang].help);
                                    break;
                                case "About":
                                    $(this).val(sankoreLang[lang].about);
                                    break;
                                case "Moving":
                                    $(this).val(sankoreLang[lang].moving);
                                    break;
                                case "Tangente":
                                    $(this).val(sankoreLang[lang].tangente);
                                    break;
                                case "Point":
                                    $(this).val(sankoreLang[lang].point);
                                    break;
                                case "Calculate":
                                    $(this).val(sankoreLang[lang].calculate);
                                    break;
                                case "Estimate":
                                    $(this).val(sankoreLang[lang].estimate);
                                    break;
                                case "Start to analysis":
                                    $(this).val(sankoreLang[lang].start_to_analysis);
                                    break;
                                case "Test XPM":
                                    $(this).val(sankoreLang[lang].test + " XPM");
                                    break;
                                case "Test SVG":
                                    $(this).val(sankoreLang[lang].test + " SVG");
                                    break;
                                case "Test Canvas":
                                    $(this).val(sankoreLang[lang].test + " Canvas");
                                    break;
                                case "Save":
                                    $(this).val(sankoreLang[lang].save);
                                    break;
                                case "Load":
                                    $(this).val(sankoreLang[lang].load);
                                    break;
                                case "Delete":
                                    $(this).val(sankoreLang[lang].del);
                                    break;
                                case "Display":
                                    $(this).val(sankoreLang[lang].display);
                                    break;
                                case "Reload widget":
                                    $(this).val(sankoreLang[lang].reload_widget);
                                    break;
                                case "Updated":
                                    $(this).val(sankoreLang[lang].update);
                                    break;
                                case "Update zoom":
                                    $(this).val(sankoreLang[lang].update_zoom);
                                    break;
                                case "Reset display":
                                    $(this).val(sankoreLang[lang].reset_display);
                                    break;
                                case "User's guide":
                                    $(this).val(sankoreLang[lang].guide);
                                    break;
                                default:
                                    break;                                                                                                                                
                            }
                            return true;
                        });
                    }
                    
                    $(document).disableTextSelect();
                   
                    $("input, select").mouseover(function(){
                        $(document).enableTextSelect(); 
                    });
                    
                    $("input, select").mouseout(function(){
                        $(document).disableTextSelect(); 
                    });
                    
                    $("body").mouseout(function(){
                        if(window.sankore && loadingFlag){
                            sankore.setPreference("functionData",$("#inputEq").val());
                            sankore.setPreference("xAxisFrom",$("#borneXGauche").val());
                            sankore.setPreference("xAxisTo",$("#borneXDroite").val());
                            sankore.setPreference("yAxisFrom",$("#borneYGauche").val());
                            sankore.setPreference("yAxisTo",$("#borneYDroite").val());
                            sankore.setPreference("functionColor",$("#inputTeinte").val());
                            sankore.setPreference("functionValue",$("#inputValeur").val());
                            sankore.setPreference("functionSaturation",$("#inputSaturation").val());
                            sankore.setPreference("functionRed",$("#inputRouge").val());
                            sankore.setPreference("functionGreen",$("#inputVert").val());
                            sankore.setPreference("functionBlue",$("#inputBleu").val());
                            sankore.setPreference("functionOpacity",$("#inputOpacity").val());
                            sankore.setPreference("functionColorId", idColor);
                            
                            if ($('#checkDerivee').is(":checked"))
                                sankore.setPreference("simplefx","1");
                            else
                                sankore.setPreference("simplefx","0");
                            if ($('#checkDerivee2').is(":checked"))
                                sankore.setPreference("hardfx","1");
                            else
                                sankore.setPreference("hardfx","0");
                            
                            sankore.setPreference("squareUnderFrom", $("#aireG").val());
                            sankore.setPreference("squareUnderTo", $("#aireD").val());
                            sankore.setPreference("calculateThePoint", $("#inputX").val());
                            
                            if ($('#checkAire').is(":checked"))
                                sankore.setPreference("checkboxDraw","1");
                            else
                                sankore.setPreference("checkboxDraw","0");
                                                        
                            sankore.setPreference("selectedTheme", $("#selectTheme").val());
                            sankore.setPreference("graphicalMethodDisplaying", $("#selectMethodeAffichage").val());
                            sankore.setPreference("defaultZoom", $("#zoomDefaut").val());
                            
                            if ($('#checkGrille').is(":checked"))
                                sankore.setPreference("showGrid","1");
                            else
                                sankore.setPreference("showGrid","0");
                            if ($('#checkAxes').is(":checked"))
                                sankore.setPreference("showAxis","1");
                            else
                                sankore.setPreference("showAxis","0");
                            if ($('#checkEchelle').is(":checked"))
                                sankore.setPreference("showScale","1");
                            else
                                sankore.setPreference("showScale","0");
                            
                            sankore.setPreference("styleOf3DShow", $("#selectAffichage3D").val());
                            sankore.setPreference("accuracyFunction", $("#inputPrecision3D").val());
                            sankore.setPreference("redColor", $("#selectRouge3D").val());
                            sankore.setPreference("greenColor", $("#selectVert3D").val());
                            sankore.setPreference("blueColor", $("#selectBleu3D").val());
                            sankore.setPreference("3DGeneralColor", $("#couleur3Dgenerale").val());
                            sankore.setPreference("thickness", $("#inputTaille").val());
                            sankore.setPreference("offsetDiagrammX", $("#inputDecalageX").val());
                            sankore.setPreference("offsetDiagrammY", $("#inputDecalageY").val());
                            sankore.setPreference("accuracyGraph", $("#inputPrecision").val());
                            
                            if(historique.length)
                                sankore.setPreference("graphmeHistory", historique.toString());
                        }
                    });
                });
                //alert(navigator.appName+" ; "+navigator.appVersion+" ; "+navigator.userAgent)

        // ------------- Fonctions du widgets -------------
        // Lance la procédure pour dessiner la fonction qui se trouve dans l'input en haut du widget.
        // Permet aussi d'actualiser le graphique.
                function actualiserGraph(){
                        evaluer(document.getElementById("inputEq").value)
                }

        // Cette fonction détermine si la fonction entrée est valide ou non.
        // Elle retourne "true" si la fonction ne comporte pas de caractères interdits et "false" dans le cas contraire.
                function check(eq){
                   for(var i=0; i<interdit.length; i++){
                      var condition = ""
                      for(var k=0; k<interdit[i].length; k++){
                         if(k==0){
                            condition = condition + "eq.charAt(j) == interdit[i].charAt(0)"
                         }
                         else{
                            condition = condition + "&& eq.charAt(j+"+k+") == interdit[i].charAt("+k+")"
                         }
                      }
                      //alert(interdit[i]+" ; "+condition)
                      for(var j=0; j<eq.length; j++){
                         if(eval(condition)){
                                document.getElementById("spanFctInterdite").innerHTML = interdit[i]
                                afficherMenu("fctInterdite")
                            //alert("------- Erreur -------\nImpossible de dessiner la fonction ... \nExpression ou carractère invalide : "+interdit[i]+"")
                            return false
                         }
                      }
                   }
                   return true
                }

        // Cette fonction permet de choisir la méthode d'affichage entre:
        // 1) Image au format XPM
        // 2) Affichage directe dans sankore
        // 3) Autres Méthodes d'affichages (svg ou canvas)
                function evaluer(eq){
                        if(check(eq)){
                                try{
                                        if(historique[0]!=eq && eq!="1000"){
                                                for(var i=0;i<historique.length;i++){
                                                        if(historique[i]==eq){
                                                                historique.splice(i, 1)
                                                        }
                                                }
                                                historique.unshift(eq)
                                                actualiserHistorique()
                                        }
                                        if(fonction3D){
                                        dessiner3D(eq)
                                        }
                                        else if(document.getElementById("selectMethodeAffichage").value == "xpm"){
                                        evaluerXPM(eq)
                                        }
                                        else if(document.getElementById("selectMethodeAffichage").value == "sankore"){
                                        evaluerUniboard(eq)
                                        }
                                        else if(document.getElementById("selectMethodeAffichage").value == "canvas" || document.getElementById("selectMethodeAffichage").value == "canvas2"){
                                                evaluerCanvas(eq)
                                        }
                                        else{
                                                evaluerSVG(eq)
                                        }
                                }
                                catch(err){
                                        afficherMenu("erreurFct")
                                }
                        }
                }

        // ---- Fonctions Mathématiques et constantes ----
        // (rempalce sin() par Math.sin(), cos() par Math.cos(), tan() par Math.tan(), etc.
                var pi = 4 * atan(1)
                var e = exp(1)

                function sin(valeur){
                   return Math.sin(valeur)
                }
                function cos(valeur){
                   return Math.cos(valeur)
                }
                function tan(valeur){
                   return Math.tan(valeur)
                }
                function cot(valeur){
                   return 1/Math.tan(valeur)
                }
                function sec(valeur){
                   return 1/cos(valeur)
                }
                function csc(valeur){
                   return 1/sin(valeur)
                }

                function asin(valeur){
                   return Math.asin(valeur)
                }
                function acos(valeur){
                   return Math.acos(valeur)
                }
                function atan(valeur){
                   return Math.atan(valeur)
                }
                function acot(valeur){
                   return Math.atan(1/valeur)
                }
                function asec(valeur){
                   return Math.acos(1/valeur)
                }
                function acsc(valeur){
                   return Math.asin(1/valeur)
                }

                var arcsin = asin
                var arccos = acos
                var arctan = atan
                var arccot = acot
                var arcsec = asec
                var arccsc = acsc

                function sinh(valeur){
                   return (Math.exp(valeur)-Math.exp(-valeur))/2
                }
                function cosh(valeur){
                   return (Math.exp(valeur)+Math.exp(-valeur))/2
                }
                function tanh(valeur){
                   return (Math.exp(valeur)-Math.exp(-valeur))/(Math.exp(valeur)+Math.exp(-valeur))
                }
                function coth(valeur){
                   return (Math.exp(valeur)+Math.exp(-valeur))/(Math.exp(valeur)-Math.exp(-valeur))
                }
                function sech(valeur){
                   return 1/cosh(valeur)
                }
                function csch(valeur){
                   return 1/sinh(valeur)
                }

                function asinh(valeur){
                   return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)+1))
                }
                function acosh(valeur){
                   return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)-1))
                }
                function atanh(valeur){
                   return Math.log((1+valeur)/(1-valeur))/2
                }
                function acoth(valeur){
                   return Math.log((valeur+1)/(valeur-1))/2
                }

                var arcsinh = asinh
                var arccosh = acosh
                var arctanh = atanh
                var arccoth = acoth

                function sqrt(valeur){
                   return Math.sqrt(valeur)
                }
                function pow(valeur1, valeur2){
                   return Math.pow(valeur1, valeur2)
                }
                function root(valeur1, valeur2){
                   if(valeur2%2==1 && valeur1<0){
                      return -Math.pow(-valeur1, (1/valeur2))
                   }
                   else{
                      return Math.pow(valeur1, (1/valeur2))
                   }
                }

                function exp(valeur){
                   return Math.exp(valeur)
                }
                function log(valeur){
                   return Math.log(valeur)/Math.log(10)
                }
                function ln(valeur){
                   return Math.log(valeur)
                }

                function abs(valeur){
                   return Math.abs(valeur)
                }
                function sign(valeur){
                        if(valeur<0){
                                return -1
                        }
                        else if(valeur>0){
                                return 1
                        }
                        else{
                                return undefined
                        }
                }

                function round(valeur){
                   return Math.round(valeur)
                }
                function ceil(valeur){
                   return Math.ceil(valeur)
                }
                function floor(valeur){
                   return Math.floor(valeur)
                }
                function random(){
                   return Math.random()
                }
// ]]>
        </script>
    </head>
    <body onload="evaluer(1000);checkCouleurs3D();loadOptions();majAuto()" onkeypress="keyPress(event)">
        <!-- ..... Haut du Widget ..... -->
        <span id="haut">
            <span id="texteFonction">Function: </span><input id="inputEq" onkeypress='if(event.keyCode==13) evaluer(this.value)' onkeyup="document.getElementById('fonctionActuelle').innerHTML = this.value"/> 
            <input type="button" onclick='evaluer(document.getElementById("inputEq").value)' value="Display"/><input type="button" style="width:21px;" onclick="menuFonctions()" value="+"/>
        </span>
        <!--<div id="miniMax" onclick="miniMax()">-</div>  ▶▼ -->
        <div id="boutonAgrandir" class="miniBouton" onclick="agrandirAffichage()">^</div>
        <!--<div id="boutonFermer" class="miniBouton" onclick="close()"></div>-->
        <br/>

        <!-- ..... Millieu du Widget ..... -->
        <!-- Zone d'affichage -->
        <div id="affichage" onmousedown="sourisDown()" onmouseup="sourisUp()" onmousemove="sourisMove(event)" ondblclick="doubleClick(event.ctrlKey)"></div>
        <!-- Zone de boutons gauche -->
        <div id="gauche">
            <span id="xAxis">X-axis:</span> <br/>
            <input id="borneXGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> ... <input id="borneXDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> <br/>
            <span id="yAxis">Y-axis:</span> <br/>
            <input id="borneYGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> ... <input id="borneYDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/>
            <br/><span id="scaleZoom">Zoom:</span> <br/>
            <input type="button" style="width:45%;" onclick='zoom(1.25)' value="-"/><input type="button" style="width:45%; position:relative; left: 9px;" onclick='zoom(0.8)' value="+"/><br/><br/>
            <span id="graphColor">Color:</span> <br/>
            <div id="buttonColor" title="couleurFonction" onclick="colorPicker(this.id); afficherMenu('menuCouleur')"></div>
            <br/><br/>
            <hr/>
            <br/>
            Menus:
            <input type="button" class="boutonGauche" onclick='document.getElementById("etudeFct").innerHTML = document.getElementById("inputEq").value;afficherMenu("menuOutils")' value="Tools"/>
            <input type="button" class="boutonGauche" onclick='afficherMenu("menuOptions")' value="Options"/>
            <input type="button" class="boutonGauche" onclick='afficherMenu("menuAide")' value="Help"/>
            <input type="button" class="boutonGauche" onclick='afficherMenu("menuCredits")' value="About"/>

            <!-- ..... Menus ..... -->
            <div id="menu" class="menu">
                <div id="contenuMenu" class="contenuMenu"></div>
                <div class="barreBasMenu">
                    <input type="button" onclick='cacherMenu()' value="Cancel"/>
                </div>
            </div>
        </div>
        <div id="gauche3D">
            <input type="button" class="boutonGauche3D" onclick='afficherMenu("menuCredits")' value="About"/>
            <input type="button" class="boutonGauche3D" onclick='afficherMenu("menuAide")' value="Help"/>
            <input type="button" class="boutonGauche3D" onclick='afficherMenu("menuOptions")' value="Options"/>
            <input type="button" style="width:30px;" onclick='zoom3D(0.8)' value="-"/><input type="button" style="width:30px;" onclick='zoom3D(1.25)' value="+"/>
        </div>

        <!-- Options -->
        <div id="menuOptions" class="menu">
            <table class="ongletMenu">
                <tr>
                    <td class="ongletMenuActuel" onclick='afficherMenu("menuOptions")'>Widget</td>
                    <td onclick='afficherMenu("menuOptions2D")'>2D</td>
                    <td onclick='afficherMenu("menuOptions3D")'>3D</td>
                </tr>
            </table>
            <div class="contenuMenu avecBordures">
                <h3>Widget options</h3>

                <span>Themes of widget:</span> <select id="selectTheme" onchange="changerTheme(this.value)">
                    <option value="noir">Black</option>
                    <option value="bleu">Blue</option>
                    <option value="blanc">White</option>
                </select><br/>
                <br/><br/><br/>
                <span class="gras">Control options:</span><br/>
                <input type="button" class="boutonSauvegarde" onclick="saveOptions()" value="Save"/><input type="button" class="boutonSauvegarde" onclick="loadOptions()" value="Load"/> <input class="boutonSauvegarde2" type="button" onclick="delOptions()" value="Delete"/><input class="boutonSauvegarde2" type="button" onclick="alertOptions()" value="Display"/><br/>
                <span class="texteSecondaire">Save a widget options in cookies or load an options from cookies or delete a registered options.</span>
                <br/>
                <div id="cacheCookies"><br/><br/><h1>Cookies are disabled. You cannot save an options...</h1></div>
                <div id="cacheMaJ">You are using the last version of this widget.</div>
                <input type="button" onclick='reset()' value="Reload widget" style="position:absolute; bottom:20px; width:140px; height:32px;"/>
            </div>
            <div class="barreBasMenu"><input type="button" onclick="cacherMenu(); actualiserGraph()" value="Check"/></div>
        </div>

        <div id="menuOptions2D" class="menu">
            <table class="ongletMenu">
                <tr>
                    <td onclick='afficherMenu("menuOptions")'>Widget</td>
                    <td class="ongletMenuActuel" onclick='afficherMenu("menuOptions2D")'>2D</td>
                    <td onclick='afficherMenu("menuOptions3D")'>3D</td>
                </tr>
            </table>
            <div class="contenuMenu avecBordures">
                <h3>Options 2D</h3>
                <span>The graphical method displaying:</span><select id="selectMethodeAffichage">
                    <option value="canvas">canvas (lines)</option>
                    <option value="canvas2">canvas (points)</option>
                    <option value="svg">svg</option>
                    <option value="svg2">svg (1 image)</option>
                    <option value="xpm">xpm</option>
                    <option value="sankore">sankore</option>
                </select> <br/>
                <span>Zoom default:</span> 
                <input value="5" class="smallInput" id="zoomDefaut"/>
                <input type="button" onclick='reinitialiserZoom(document.getElementById("zoomDefaut").value)' value="Update zoom"/> <br/>
                <br/>
                <input type="checkbox" id="checkGrille" checked="true" onclick="actualiserGraph()"/><label for="checkGrille">Show grid</label> <br/>
                <input type="checkbox" id="checkAxes" checked="true" onclick="actualiserGraph()"/><label for="checkAxes">Show axis</label> <br/>
                <input type="checkbox" id="checkEchelle" checked="true" onclick="actualiserGraph()"/><label for="checkEchelle">Scale</label> <br/>
                <span>Thickness:</span> <input id="inputTaille" class="smallInput" value="3" onkeypress='if(event.keyCode==13) actualiserGraph()' style=""/>
                <div class="boutonPlus" type="button" onclick="boutonPlus('inputTaille', 1); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputTaille', 1); actualiserGraph()">-</div> <br/>
                <br/>
                <span>Offset diagram:</span> 
                x=<input value="0" class="smallInput" id="inputDecalageX" onkeyup="decalageX = parseFloat(this.value)"/>
                y=<input value="0" class="smallInput" id="inputDecalageY" onkeyup="decalageY = parseFloat(this.value)"/>
                <br/>
                <span>Accuracy graph:</span>
                <input value="0.02" class="smallInput" id="inputPrecision" onkeyup="precision = parseFloat(this.value)"/>
                <div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">-</div> <br/>
                <br/>
            </div>
            <div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Check"/></div>
        </div>

        <div id="menuOptions3D" class="menu">
            <table class="ongletMenu">
                <tr>
                    <td onclick='afficherMenu("menuOptions")'>Widget</td>
                    <td onclick='afficherMenu("menuOptions2D")'>2D</td>
                    <td class="ongletMenuActuel" onclick='afficherMenu("menuOptions3D")'>3D</td>
                </tr>
            </table>
            <div class="contenuMenu avecBordures">
                <h3>Options 3D</h3>
                <span>Show the style:</span> 
                <select id="selectAffichage3D">
                    <option value="surfaces"> surfaces </option>
                    <option value="points"> points </option>
                </select> <input type="button" onclick='reinitialiserZoom(5)' value="Reset display"/> <br/>
                <br/>
                <span>Accuracy function:</span> <input value="0.2" class="smallInput" id="inputPrecision3D" onkeyup="precisionFonction3D = parseFloat(this.value)"/>
                <div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">-</div> <br/>
                <br/>
                <span>Use the color:</span><br/>
                <span>red:</span>
                <select onchange="checkCouleurs3D()" id="selectRouge3D">
                    <option value="plus">positive value</option>
                    <option value="moins">negative value</option>
                    <option value="tout">general value</option>
                </select>
                <br/>
                <span>green:</span>
                <select onchange="checkCouleurs3D()" id="selectVert3D">
                    <option value="moins">negative value</option>
                    <option value="plus">positive value</option>					
                    <option value="tout">general value</option>
                </select>
                <br/>
                <span>blue:</span>
                <select onchange="checkCouleurs3D()" id="selectBleu3D">
                    <option value="tout">general value</option>
                    <option value="plus">positive value</option>
                    <option value="moins">negative value</option>					
                </select>
                <br/>
                <span>General value:</span> <input class="smallInput" id="couleur3Dgenerale" type="texte" value="0" onkeyup="checkCouleurs3D()"/> (<span>from</span> 0 <span>to</span> 255)
                <br/>
                <span id="apercuCouleur3D"></span>
            </div>
            <div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Check"/></div>
        </div>

        <!-- Aide -->
        <div id="menuAide" class="menu">
            <table class="ongletMenu">
                <tr>
                    <td class="ongletMenuActuel" onclick='afficherMenu("menuAide")'>Using</td>
                    <td onclick='afficherMenu("menuAideExemples")'>Examples</td>
                    <td onclick='afficherMenu("menuAideAutres")'>Other</td>
                </tr>
            </table>
            <div class="contenuMenu avecBordures">
                <h1>How it work.</h1>
                <p><span>This widget allow to draw mathematical function. Enter function in the field in the top part of widget and press "Show".</span></p>
                <p><span>You can enter following mathematical function:</span><br/>
                    <h2>Basic operations</h2>
                    <ul>
                        <li><span>Plus</span> -> <span class="gras">+</span></li>
                        <li><span>Minus</span> -> <span class="gras">-</span></li>
                        <li><span>Multiplication</span> -> <span class="gras">*</span></li>
                        <li><span>Division</span> -> <span class="gras">/</span></li>
                        <li><span>Mod</span> -> <span class="gras">%</span></li>
                    </ul>
                    <h2>Trigonometric functions</h2>
                    <ul>
                        <li><span>Sine</span> -> <span class="gras">sin(x)</span></li>
                        <li><span>Cosine</span> -> <span class="gras">cos(x)</span></li>
                        <li><span>Tangent</span> -> <span class="gras">tan(x)</span></li>
                        <li><span>Cotangent</span> -> <span class="gras">cot(x)</span></li>
                        <li><span>Secant</span> -> <span class="gras">sec(x)</span></li>
                        <li><span>Cosecant</span> -> <span class="gras">csc(x)</span></li>
                    </ul>
                    <ul>
                        <li><span>Arc sine</span> -> <span class="gras">arcsin(x)</span> <span>or</span> <span class="gras">asin(x)</span></li>
                        <li><span>Arc cosine</span> -> <span class="gras">arccos(x)</span> <span>or</span> <span class="gras">acos(x)</span></li>
                        <li><span>Arc tangent</span> -> <span class="gras">arctan(x)</span> <span>or</span> <span class="gras">atan(x)</span></li>
                        <li><span>Arc cotangent</span> -> <span class="gras">arccot(x)</span> <span>or</span> <span class="gras">acot(x)</span></li>
                    </ul>
                    <h2>Hyperbolic functions</h2>
                    <ul>
                        <li><span>Hyperbolic sine</span> -> <span class="gras">sinh(x)</span></li>
                        <li><span>Hyperbolic cosine</span> -> <span class="gras">cosh(x)</span></li>
                        <li><span>Hyperbolic tangent</span> -> <span class="gras">tanh(x)</span></li>
                        <li><span>Hyperbolic cotangent</span> -> <span class="gras">coth(x)</span></li>
                        <li><span>Hyperbolic secant</span> -> <span class="gras">sech(x)</span></li>
                        <li><span>Hyperbolic cosecant</span> -> <span class="gras">csch(x)</span></li>
                    </ul>
                    <ul>
                        <li><span>Hyperbolic arc sine</span> -> <span class="gras">arcsinh(x)</span> <span>or</span> <span class="gras">asinh(x)</span></li>
                        <li><span>Hyperbolic arc cosine</span> -> <span class="gras">arccosh(x)</span> <span>or</span> <span class="gras">acosh(x)</span></li>
                        <li><span>Hyperbolic arc tangent</span> -> <span class="gras">arctanh(x)</span> <span>or</span> <span class="gras">atanh(x)</span></li>
                        <li><span>Hyperbolic arc cotangent</span> -> <span class="gras">arccoth(x)</span> <span>or</span> <span class="gras">acoth(x)</span></li>
                    </ul>
                    <h2>Square roots and degrees</h2>
                    <ul>
                        <li><span>Square root</span> -> <span class="gras">sqrt(x)</span></li>
                        <li><span>Degree</span> -> <span class="gras">pow(x, y)</span> <span class="texteSecondaire">Variable x to the power y</span></li>
                        <li><span>Root</span> -> <span class="gras">root(x, y)</span> <span class="texteSecondaire">Root y of x</span></li>
                    </ul>
                    <h2>Exponential and logarithm</h2>
                    <ul>
                        <li>e<span style="vertical-align:super;">x</span> -> <span class="gras">exp(x)</span></li>
                        <li><span>Natural logarithm</span> -> <span class="gras">ln(x)</span></li>
                        <li><span>Decimal logarithm</span> -> <span class="gras">log(x)</span></li>
                    </ul>
                    <h2>Absolute number value</h2>
                    <ul>
                        <li>|x| -> <span class="gras">abs(x)</span></li>
                    </ul>
                    <h2>Rounding</h2>
                    <ul>
                        <li><span class="gras">round(x)</span> -> <span>rounding to the nearest whole number</span></li>
                        <li><span class="gras">ceil(x)</span> -> <span>rounding to the nearest whole number in a big way</span></li>
                        <li><span class="gras">floor(x)</span> -> <span>rounding to the nearest whole number the smaller side</span></li>
                    </ul>					
                </p> <br/>
                <hr/>
                <h1>Constants</h1>
                <p><span>Also are available some constants:</span><br/>
                    <ul>
                        <li><span class="gras">pi</span> = 4 * atan(1) ≈  3,141592653589793</li>
                        <li><span class="gras">e</span> = exp(1) ≈ 2.718281828459045</li>
                    </ul>
                </p>
                <br/>
                <hr/>
                <h1>Keyboard keys</h1>
                <p style="font-size:90%;">
                    esc -> <span>reset widget</span> <br/>
                    ctrl + <span>left arrow</span> -> <span>graph will be moved left</span><br/>
                    ctrl + <span>top arrow</span> -> <span>graph will be moved top</span><br/>
                    ctrl + <span>right arrow</span> -> <span>graph will be moved right</span><br/>
                    ctrl + <span>bottom arrow</span> -> <span>graph will be moved bottom</span><br/>
                    <br/>
                </p>
                <br/>
                <input type="button" value="User's guide" onclick="navigateur('Guide_Utilisateur.html')" style="position:absolute;bottom:0px;left:0px;"/>
            </div>
            <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
        </div>

        <div id="menuAideExemples" class="menu">
            <table class="ongletMenu">
                <tr>
                    <td onclick='afficherMenu("menuAide")'>Using</td>
                    <td class="ongletMenuActuel" onclick='afficherMenu("menuAideExemples")'>Examples</td>
                    <td onclick='afficherMenu("menuAideAutres")'>Other</td>
                </tr>
            </table>
            <div class="contenuMenu avecBordures">
                <span class="texteSecondaire">(You can view example. Do not forget to set accuracy in options if necessary.)</span>
                <br/><br/>
                <hr/>
                <h1>Functions 2D</h1>
                <p>
                    <span class="survol" onclick="document.getElementById('inputEq').value = '0.5*x+1' ; actualiserGraph()">0.5*x+1</span> <br/>
                    <span class="survol" onclick="document.getElementById('inputEq').value = 'pow(x,2)-3' ; actualiserGraph()">pow(x,2)-3</span> <br/>
                    <span class="survol" onclick="document.getElementById('inputEq').value = '1/x' ; actualiserGraph()">1/x</span> <br/>
                    <span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)' ; actualiserGraph()">atan(x)</span> <br/>
                    <span class="survol" onclick="document.getElementById('inputEq').value = '(x+1/x)/1.2' ; actualiserGraph()">(x+1/x)/1.2</span> <br/>
                    <span class="survol" onclick="document.getElementById('inputEq').value = 'sin(10*x*x)*0.5' ; actualiserGraph()">sin(10*x*x)*0.5</span> <br/>
                    <span class="survol" onclick="document.getElementById('inputEq').value = 'log(pow(x-2,2))' ; actualiserGraph()">log(pow(x-2,2))</span> <br/>
                    <span class="survol" onclick="document.getElementById('inputEq').value = '(x*x-5*x+5)*exp(x)/5' ; actualiserGraph()">(x*x-5*x+5)*exp(x)/5</span> <br/>

                    <span class="survol" onclick="document.getElementById('inputEq').value = 'random()' ; evaluer('random()')">random()</span> <br/>
                </p>
                <br/><br/>
                <hr/>
                <h1>Functions 3D</h1>
                <p>
                    <span class="survol" onclick="document.getElementById('inputEq').value = 'sin(x)+cos(y)' ; actualiserGraph()">sin(x)+cos(y)</span> <br/>
                    <span class="survol" onclick="document.getElementById('inputEq').value = 'sqrt(10-x*x)' ; actualiserGraph()">sqrt(10-x*x)</span> <br/>
                    <span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)+atan(y)' ; actualiserGraph()">atan(x)+atan(y)</span> <br/>
                </p>
                <br/>
            </div>
            <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
        </div>

        <div id="menuAideAutres" class="menu">
            <table class="ongletMenu">
                <tr>
                    <td onclick='afficherMenu("menuAide")'>Using</td>
                    <td onclick='afficherMenu("menuAideExemples")'>Examples</td>
                    <td class="ongletMenuActuel" onclick='afficherMenu("menuAideAutres")'>Other</td>
                </tr>
            </table>
            <div class="contenuMenu avecBordures">
                <h4>Save graph</h4>
                <span>In some browsers when used display method "Canvas" you can save graph by clicking it with right mouse button and selecting "Save image". Also you can save 3D-graphs.</span>
                <br/><br/>
                <h4>Offset</h4>
                <span>If graph isn't in the right place (larger than canvas) then can you set necessary parameters graph displaying in settings menu.</span> 
            </div>
            <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
        </div>

        <!-- Crédits -->
        <div id="menuCredits" class="menu">
            <div class="contenuMenu" style="text-align:justify;">
                <br/>
                <table id="credits">
                    <tr>
                        <td>
                            <img src="icon.png"/>
                            <h3>Widget is developed by</h3> 
                            Yannick Vessaz <br/>
                            <a href='mailto:yannick.vessaz@gmail.com'>yannick.vessaz@gmail.com</a>
                        </td>
                    </tr>
                </table>
                <span class="texteSecondaire">
                    <br/><br/>
                    <span>If you want to inform about bug, make a proposal or just ask some questions then you can  contact to me at the following e-mail:</span> <a href='mailto:yannick.vessaz@gmail.com'>e-mail</a>.
                    <br/><br/>
                    <span>If you want to change background design then you can contact at following address:</span> <a href="http://kde.org">KDE</a>.
                </span>
                <span id="version" class="texteSecondaire" style="position:absolute;bottom:10px;left:15px;">version 1.3</span>
            </div>
            <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
        </div>

        <!-- Outils -->
        <div id="menuOutils" class="menu">
            <div class="contenuMenu">
                <h3 style="margin-top:0px; margin-bottom:15px;">Tools</h3> 
                <span>Mouse events:</span><br/>
                <input type="button" class="choixOutil" onclick="choixOutil('deplacement');cacherMenu()" value="Moving"/>
                <input type="button" class="choixOutil" onclick="choixOutil('tangente');cacherMenu()" value="Tangente"/>
                <input type="button" class="choixOutil" onclick="choixOutil('point');cacherMenu()" value="Point"/>
                <br/><br/>
                <span>Derivative:</span><br/>
                <label for="checkDerivee"> f'(x) </label><input type="checkbox" id="checkDerivee" onclick="actualiserGraph()"/><label for="checkDerivee2"> f''(x) </label><input type="checkbox" id="checkDerivee2" onclick="actualiserGraph()"/>
                <br/><br/>
                <span>Square under function:</span><br/>
                <span>From</span> <input value="-5" class="smallInput" id="aireG"/> <span>to</span> <input value="5" class="smallInput" id="aireD"/> <input type="button" onclick='calculerAire()' value="Calculate"/> <span id="outputAire"></span>
                <div style="float: right;"><label for="checkAire">Draw </label><input type="checkbox" id="checkAire" onclick="actualiserGraph()"/></div>
                <br/><br/>
                <span>Calculate the point on the function:</span><br/>
                x=<input value="0" class="smallInput" id="inputX" onkeypress='if(event.keyCode==13) execute(document.getElementById("inputEq").value)'/>
                <input type="button" onclick='execute(document.getElementById("inputEq").value)' value="Estimate"/>
                <span id="outputX"></span>
                <br/><br/>
                <span>Analysis of function:</span> <br/>
                f(x) = <span id="etudeFct"></span> <input type="button" value="Start to analysis" onclick='etudier(document.getElementById("inputEq").value);afficherMenu("menuEtude")'/>
                <br/><br/>
                <span>Display test:</span><br/>
                <input type="button" onclick='cacherMenu(); testXPM()' value="Test XPM"/><input type="button" onclick='cacherMenu(); testSVG()' value="Test SVG"/><input type="button" onclick='cacherMenu(); testCanvas()' value="Test Canvas"/>
            </div>
            <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
        </div>

        <!--Etude de fonction -->
        <div id="menuEtude" class="menu">
            <div class="contenuMenu">
                <h3>Analysis of function</h3>
                <span>Set of definitions:</span> <span id="etudeEDF">...</span> <br/>
                <span>Parity:</span> <span id="etudeParite">...</span> <br/>
                <span>Zeros of functions:</span> <span id="etudeZeros">...</span> <br/>
                <table>
                    <tr id="etudeSigne">
                        <td>Sign : ...</td>
                    </tr>
                </table>
                <span>Asymptotes</span> <br/>
                <span>AH left:</span> : <span id="etudeAHG">...</span> <br/>
                <span>AH right:</span> <span id="etudeAHD">...</span> <br/>
                <span>AV:</span> <span id="etudeAV">...</span>
                <span id="etudeMin">...</span>
                <span id="etudeMax">...</span>
                <span id="etudeI">...</span> <br/><br/>
                <span class="texteSecondaire" style="font-size:10px;">Tool for analysis of function is not reliable on 100%. Don't forget check results of analysis before use it.</span>
            </div>
            <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
        </div>

        <!-- Fonctions multiples -->
        <div id="menuFonctions" class="menu">
            <table class="ongletMenu">
                <tr>
                    <td class="ongletMenuActuel" onclick='afficherMenu("menuFonctions")'>Functions</td>
                    <td onclick='afficherMenu("menuHistorique")'>History</td>
                </tr>
            </table>
            <div class="contenuMenu avecBordures">
                <em>Current</em><br/>
                f(x) = <span id="fonctionActuelle">x</span> <input type="button" value="+" onclick="ajouterFonction(document.getElementById('fonctionActuelle').innerHTML)"/>
                <br/><br/>
                <em>Additional</em><br/>
                <span id="fonctionsSupp">n/a ...</span>
            </div>
            <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
        </div>

        <!-- Historique -->
        <div id="menuHistorique" class="menu">
            <table class="ongletMenu">
                <tr>
                    <td onclick='afficherMenu("menuFonctions")'>Functions</td>
                    <td class="ongletMenuActuel" onclick='afficherMenu("menuHistorique")'>History</td>
                </tr>
            </table>
            <div class="contenuMenu avecBordures" id="divHistorique">
                <span id="spanHistorique"></span>
            </div>
            <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
        </div>

        <!-- Couleur -->
        <div id="menuCouleur" class="menu">
            <div class="contenuMenu">
                <em>Choosing the color:</em> <br/><br/>
                <div id="colorSV" onmousemove="if(mouseDown==true){colorSV(event)}" onmousedown="colorSV(event); mouseDown = true" onmouseup="mouseDown = false">
                    <svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <svg:defs id="defs1">
                            <svg:linearGradient id="linearGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
                                <svg:stop
                                    style="stop-color:#000000;stop-opacity:1;"
                                    offset="0%" />
                                <svg:stop
                                    style="stop-color:#000000;stop-opacity:0;"
                                    offset="100%" />
                            </svg:linearGradient>
                            <svg:linearGradient id="linearGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
                                <svg:stop
                                    style="stop-color:#ffffff;stop-opacity:0;"
                                    offset="0%" />
                                <svg:stop
                                    style="stop-color:#ffffff;stop-opacity:1;"
                                    offset="100%" />
                            </svg:linearGradient>
                        </svg:defs>
                        <svg:rect
                            style="fill:url(#linearGradient2);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
                            width="255"
                            height="255"
                            x="0"
                            y="0"
                            ry="0" />
                        <svg:rect
                            style="fill:url(#linearGradient1);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
                            width="255"
                            height="255"
                            x="0"
                            y="0"
                            ry="0" />
                        <svg:line
                            id="ligneValeur"
                            x1="255"
                            y1="0"
                            x2="255"
                            y2="255"
                            style="stroke:rgb(0,0,0);stroke-width:2"/>
                        <svg:line
                            id="ligneSaturation"
                            x1="0"
                            y1="0"
                            x2="255"
                            y2="0"
                            style="stroke:rgb(0,0,0);stroke-width:2"/>
                    </svg:svg>
                </div>
                <div id="colorT" onmousemove="if(mouseDown==true){colorT(event)}" onmousedown="colorT(event); mouseDown = true" onmouseup="mouseDown = false">
                    <svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <svg:defs id="defs2">
                            <svg:linearGradient id="linearGradient3" x1="0%" y1="100%" x2="0%" y2="0%">
                                <svg:stop
                                    style="stop-color:#ff0000;stop-opacity:1;"
                                    offset="0%" />
                                <svg:stop
                                    style="stop-color:#ff00ff;stop-opacity:1;"
                                    offset="16.66%" />
                                <svg:stop
                                    style="stop-color:#0000ff;stop-opacity:1;"
                                    offset="33.33%" />
                                <svg:stop
                                    style="stop-color:#00ffff;stop-opacity:1;"
                                    offset="50%" />
                                <svg:stop
                                    style="stop-color:#00ff00;stop-opacity:1;"
                                    offset="66.66%" />
                                <svg:stop
                                    style="stop-color:#ffff00;stop-opacity:1;"
                                    offset="83.33%" />
                                <svg:stop
                                    style="stop-color:#ff0000;stop-opacity:1;"
                                    offset="100%" />
                            </svg:linearGradient>
                        </svg:defs>
                        <svg:rect
                            style="fill:url(#linearGradient3);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
                            width="255"
                            height="255"
                            x="0"
                            y="0"
                            ry="0" />
                        <svg:line
                            id="ligneTeinte"
                            x1="0"
                            y1="0"
                            x2="20"
                            y2="0"
                            style="stroke:rgb(0,0,0);stroke-width:2"/>
                    </svg:svg>
                </div>
                <table id="colorValues">
                    <tr>
                        <td>Color: </td><td><input id="inputTeinte" class="smallInput" value="0" onkeypress=''/></td>
                    </tr><tr>
                        <td>Value: </td><td><input id="inputValeur" class="smallInput" value="0" onkeypress=''/></td>
                    </tr><tr>
                        <td>Saturation: </td><td><input id="inputSaturation" class="smallInput" value="0" onkeypress=''/></td>
                    </tr><tr>
                        <td>Red: </td><td><input id="inputRouge" class="smallInput" value="255" onkeypress=''/></td>
                    </tr><tr>
                        <td>Green: </td><td><input id="inputVert" class="smallInput" value="0" onkeypress=''/></td>
                    </tr><tr>
                        <td>Blue: </td><td><input id="inputBleu" class="smallInput" value="0" onkeypress=''/></td>
                    </tr><tr>
                        <td>Opacity: </td><td><input id="inputOpacity" class="smallInput" value="1" onkeypress=''/></td>
                    </tr><!--<tr>
                            <td><input id="inputCouleur" style="width: 70%" value="cyan" onkeypress='couleurFonction = this.value; if(event.keyCode==13) actualiserGraph()'/></td>
                    </tr>-->
                </table>
                <div id="apercuCouleur" title="New Color"></div><div id="apercuCouleur2" title="Old Color"></div>
            </div>
            <div class="barreBasMenu"><input type="button" onclick="if(idColor=='buttonColor'){cacherMenu()}else{afficherMenu('menuFonctions')}; actualiserGraph()" value="Check"/></div>
        </div>

        <!-- Erreurs Fonctions interdites -->
        <div id="fctInterdite" class="miniMenu">
            <br/>
            <h1>------- Error -------</h1>
            <br/>
            Impossible to draw the function ...
            <br/><br/>
            Error in expression or unexpected char: <br/>
            <span id="spanFctInterdite" style="font-style:italic;"></span>
            <br/><br/>
            <input type="button" onclick="cacherMenu()" value="Ok"/>
        </div>

        <!-- Autres erreurs -->
        <div id="erreurFct" class="miniMenu">
            <h1>------- Error -------</h1>
            Runtime error! Check your function and try to draw it again.
            <br/>
            Description and parameters various functions which are available to help.
            <br/><br/>
            <input type="button" onclick="afficherMenu('menuAide')" value="Help"/>
            <input type="button" onclick="cacherMenu()" value="Ok"/>
        </div>

        <!-- Menu des mises à jour -->
        <div id="mAj" class="menu">
            <h1>Updated</h1>
            <span>Current version:</span> <br/><span id="thisVersion"></span><br/>
            <span>The last on-line version:</span> <br/><span id="newVersion"></span><br/>
            <br/>
            <span>This widget is available to using on web-site:</span> <em>http://gyb.educanet2.ch/tm-widgets/yannick</em><br/>
            <br/>			
        </div>

        <!-- Erreur mise à jour -->
        <div id="erreurMaJ" class="miniMenu">
            <br/>
            <h1>------- Error -------</h1>
            <br/><br/>
            Update to latest version is not available because you already use the latest version.
            <br/><br/><br/>
            <input type="button" onclick="cacherMenu()" value="Ok"/>
        </div>

        <!-- Info options sauvegardées -->
        <div id="infoSauvegarde" class="alertMenu">
            <br/>
            <h1>Options saved!</h1>
            <br/>
            <input type="button" onclick="document.getElementById('infoSauvegarde').style.display = 'none'" value="Ok"/>
        </div>

        <!-- ..... Flèches de déplacement ..... -->
        <div class="flecheDeplacement" id="flecheHaut" onclick="if(fonction3D){zoom3D(1.25)}else{deplacerY(1)}" onmousemove="sourisMove(event)">▲</div>
        <div class="flecheDeplacement" id="flecheGauche" onclick="deplacerX(-1)" onmousemove="sourisMove(event)">◀</div>
        <div class="flecheDeplacement" id="flecheBas" onclick="if(fonction3D){zoom3D(0.8)}else{deplacerY(-1)}" onmousemove="sourisMove(event)">▼</div>
        <div class="flecheDeplacement" id="flecheDroite" onclick="deplacerX(1)" onmousemove="sourisMove(event)">▶</div>

        <!-- ..... Bas du Widget ..... -->
        <div class="info" id="info"></div>
        <div id="point">o</div>
        <div id="tangente"></div>

        <!-- .... Autres .... -->
        <div id="onglet3D" onclick="activer3D()">3D</div>
    </body>
    <!-- .............................. Widget réalisé par Yannick Vessaz .............................. -->
    <!-- .............................. e-mail: yannick.vessaz@gmail.com  .............................. -->
</html>
